<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Live Grid</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/my-ext.js"></script>

<script type="text/javascript" src="../extjs/BufferedGridView.js"></script>    
<script type="text/javascript" src="../extjs/BufferedRowSelectionModel.js"></script>    
<script type="text/javascript" src="../extjs/BufferedStore.js"></script>    
<script type="text/javascript" src="../extjs/BufferedGridToolbar.js"></script>    
<script type="text/javascript" src="../extjs/BufferedJsonReader.js"></script>    

<script type="text/javascript">
	Ext.onReady(function() {
	    var bufferedReader = new Ext.ux.data.BufferedJsonReader({
	        root: 'root',
	        versionProperty : 'version',
	        totalProperty   : 'totalProperty',
	        id              : 'id'
	      }, [ {
	         name : 'id', sortType : 'int'
	      },{
	         name : 'name', sortType : 'string'
	      },{
	         name : 'sex', sortType : 'string'
	      },{
	         name : 'descn',   sortType : 'string'
	    }]);
	    
	    /*
	    var bufferedReader = new Ext.ux.data.BufferedJsonReader({
	        root            : 'response.value.items',
	        versionProperty : 'response.value.version',
	        totalProperty   : 'response.value.total_count',
	        id              : 'id'
	      }, [ {
	         name : 'number_field', sortType : 'int'
	      },{
	         name : 'string_field', sortType : 'string'
	      },{
	         name : 'date_field',   sortType : 'int'
	    }]);*/	    

	    var ds = new Ext.ux.grid.BufferedStore({
	        autoLoad   : true,
	        bufferSize : 50,
	        reader     : bufferedReader,
	        sortInfo   : {field: 'id', direction: 'ASC'},
	        url        : 'testLivegrid.jsp'
	    });
	    var bufferedView = new Ext.ux.grid.BufferedGridView({
            nearLimit:50,
            loadMask:{
                msg : 'Please wait...'
            }
	    }); 	    
	    
	    var bbar = new Ext.ux.BufferedGridToolbar({
	        view        : bufferedView,
	        displayInfo : true
	    });		
		
		
		var sm = new Ext.ux.grid.BufferedRowSelectionModel();
		/* 	new Ext.grid.RowNumberer(),
		    sm, */
		var cm = new Ext.grid.ColumnModel([
		    {header:'编号',dataIndex:'id',sortable:true},
		    {header:'名称',dataIndex:'name'},
		    {header:'性别',dataIndex:'sex'},
		    {header:'描述',dataIndex:'descn'}
		]);
		
	    /*
	    var cm = new Ext.grid.ColumnModel([
	        {header: "Number", align : 'left',   width: 160, sortable: true, dataIndex: 'number_field'},
	        {header: "String", align : 'left',   width: 160, sortable: true, dataIndex: 'string_field'},
	        {header: "Date",   align : 'right',  width: 160, sortable: true, dataIndex: 'date_field'}
	    ]);*/		
		
	    var grid = new Ext.grid.GridPanel({
			ds : ds,
			cm : cm,
			sm : sm,
			stripeRows : true,
			bbar : bbar,
			view: bufferedView,
			width : 10,
			loadMask : {
				msg : "读取中..."
			}
	    });
	    
	    var w = new Ext.Window({
	        title       : 'Test Live Gird',
	        maximizable : true,
	        resizable   : true,
	        layout      : 'fit',
	        items       : [grid],
	        height      : 400,
	        width       : 500
	    });
	    w.show();
	});
</script>
</head>
<body>
</body>
</html>